<template>
  <el-dialog v-model="visible" title="svg一次图" :before-close="handleClose" :draggable="true" :width="1000">
    <div class="ww100 h100x5 flex-cc overlay">
      <el-upload
      class="ww100 tc"
      ref="refUpload"
      :before-upload="onBeforeUpload"
      :http-request="uploadImageFile"
      :show-file-list="false"
      :limit="limit">
      <div class="w100x9 h100x4 bgc1 flex-ss" style="background: #000;" ref="refSvgGraph"></div>
      <span v-if="!showSvg" class="ww80 hh80 absolute-cc i11 f30 cursor flex-cc">请点击上传svg</span>
      </el-upload>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="handleClose" class="white bgi7">取 消</el-button>
        <el-button size="large" type="primary"  class="white bgi14" @click="handleSubmit()">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import api from '../api'
  import comFuc from "@/utils/common"
  const { isNull, parseTime } = comFuc
  const store = useStore()
  const refUpload = $ref()
  const refSvgGraph = $ref()
  let showSvg = $ref(true)
  let mElSvgGraph
  let elSvg
  let svg = $ref()
  let visible = $ref(false)
  let limit = $ref(1)
  let dataForm = $ref({})
  let form = $ref({})
  const props = defineProps({
    state: {
      type: [Object, Array],
      default: ()=>{return {}}
    },
  })
  // 打开关闭弹窗
  const onVisable = async (val) => {
    visible = true
    dataForm = Object.assign({}, val)
    showSvg = false
    svg = ''
    let svgRef = await store.dispatch('D', {svg: {"o": "o_stationSVG",	"p": [dataForm.station_num]}})
    console.log('svgRef', svgRef)
    if(svgRef && svgRef[0]){
      showSvg = true
      svg = svgRef[0].htmlData
      form = {o: "o_stationSVG", t: "upd", a: "修改", id: svgRef[0].id, stationNum: dataForm.station_num, htmlData: svgRef[0].htmlData}
    }else{
      form = {o: "o_stationSVG", t: "add", a: "新增", id: new Date().getTime(), stationNum: dataForm.station_num, htmlData: ''}
    }
    initData()
  }
  const handleClose = () => { 
    visible = false 
  }
  // 上传前
  const onBeforeUpload = (file) => {
    const isSVG = file.type === 'image/svg+xml';
    if (!isSVG) {
      ElNotification({ title: '提示', message: '上传图片只能是 SVG 格式!', type: 'error' })
    }
    return isSVG;
  }
  const uploadImageFile = async(options) => {
    refUpload.clearFiles()
    console.log('options', options)
    let file = options.file;
    var blob = new Blob([file], {type: 'text/html'});
    var reader = new FileReader();
    // reader.readAsBinaryString(blob);
    reader.readAsText(blob);
    reader.onload = function() {
      console.log('reader.result', reader.result)
      console.log('cxcx', svg)
      svg = reader.result;
      showSvg = true
      initData()
    }
  }

  const initData = async() => {
    refSvgGraph.innerHTML = svg
    if(!svg) return
    elSvg = refSvgGraph.getElementsByTagName('svg')[0]
    elSvg.removeAttribute("width");
    elSvg.removeAttribute("height");
    elSvg.setAttribute("width", '100%');
    elSvg.setAttribute('height', '100%');
  }
  
  // 添加
  const handleSubmit = () => {
    if(!svg) return ElNotification({ title: '提示', message: '请上传svg', type: 'error' })
    form.htmlData = svg
    api.updateApi([form]).then((res) => {
      if(res.errcode == 0){
        ElNotification({ title: '提示', message: '操作成功', type: 'success' })
        visible = false 
      }
    }).catch((err) => {
        ElNotification({ title: '提示', message: '操作失败', type: 'error' })
    })
  }
  // 暴露给父组件
  defineExpose({
    onVisable
  })
</script>

<style scoped lang="scss">
  :deep(input:-webkit-autofill) {
    -webkit-text-fill-color: #f5f5f5;
  }
</style>